<template>
    <ul
    id="app-contextMenu"
    v-if="visible" 
    :style="{left:newLeft+'px',top:newTop+'px'}" 
    class="contextmenu">
        <li class="flex-between" v-if="!isFolder&&isWeb" @click="handleOpen">
            <span>新页面打开</span>
            <el-icon><Position /></el-icon>
        </li>
        <li class="flex-between" v-if="!isFolder&&isIsland" @click="handleIsland">
            <span>灵动岛显示</span>
            <el-icon><Notification /></el-icon>
        </li>
        <li class="flex-between" v-if="!isFolder&&isWeb" @click="handleCopy">
            <span>复制链接</span>
            <el-icon><Link /></el-icon>
        </li>
        <li class="flex-between" @click="handleDelete">
            <span>删除</span>
            <el-icon><Delete /></el-icon>
        </li>
    </ul>
</template>

<script lang='ts'>
import { useAppStore } from '@/store/app';
import { copyText } from '@/utils/util';
import { reactive, toRefs, getCurrentInstance, onMounted, computed } from 'vue';
export default {
    name:'appMenu',
    props: {
        visible:{
            type:Boolean,
            default:false
        },
        left:{
            type:Number,
            default:0
        },
        top:{
            type:Number,
            default:0
        },
        contextData:{
            type:Object,
            default:null
        }
    },
    components: {

    },
    emits:[],
    setup (props, context) 
    {
        const appStore = useAppStore();
        const { proxy }:any = getCurrentInstance();
        let data = reactive({
            timer:null as any,
            newTop:props.top,
            newLeft:props.left
        });
        let methods = {
            handleCopy ()
            {
                copyText(props.contextData.link);
            },
            handleOpen ()
            {
                window.open(props.contextData.link, '_blank');
            },
            handleDelete ()
            {
                if (props.contextData.isFolder)
                {
                    appStore.deleteFolder(props.contextData.id);
                    return;
                }
                appStore.deleteApp(props.contextData.id);
            },
            handleIsland ()
            {
                appStore.setIslandData(props.contextData);
            }
        };
        onMounted(() => 
        {
            let bodyHeight = document.body.offsetHeight;
            let bodyWidth = document.body.offsetWidth;
            let menu = document.querySelector('#app-contextMenu') as HTMLDivElement;
            if (props.top +  menu.offsetHeight > bodyHeight)
            {
                data.newTop = bodyHeight - menu.offsetHeight;
            }
            else if (props.left + menu.offsetWidth > bodyWidth)
            {
                data.newLeft = (bodyWidth - 70) - menu.offsetWidth;
            }
        });

        const isFolder = computed(() => 
        {
            if (props.contextData.isFolder) return true;
            return false;
        });

        const isWeb = computed(() => 
        {
            if (props.contextData.type === 'web' || props.contextData.type === 'iframe') return true;
            return false;
        });

        const isIsland = computed(() => 
        {
            if (props.contextData.isIsland) return true;
            return false;
        });
        
        return { 
            ...toRefs(data),
            ...methods,
            isFolder,
            isWeb,
            isIsland
        };
    }
};
</script>

<style scoped lang="scss">
.contextmenu {
    z-index: 2005;
    li {
        margin: 2px 4px;
        padding: 7px 10px;
        border-radius: 6px;
        transition: all .1s;

        span {
            margin-right: 20px;
        }
    }
}

</style>
